<template>
  <div>
    <el-dialog
      title="导入错误信息列表"
      v-model="errorBox"
      width="750px"
      align-center
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="errorBox = false"
      class="uploadErrorTable"
    >
      <el-table
        ref="errorTableRef"
        :data="errorDataList"
        highlight-current-row
        border
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column
          label="行号"
          prop="lineNo"
          min-width="100"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="错误信息"
          prop="error"
          min-width="400"
          show-overflow-tooltip
          align="center"
        />
      </el-table>
      <template #footer>
        <el-button
          type="primary"
          @click="
            useDownload(
              '/wms/wmsbinsimplify/exportError',
              '导入错误信息表',
              errorDataList
            )
          "
        >
          <template #icon><i-ep-download /></template>导出</el-button
        >
        <el-button @click="errorBox = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { useDownload } from "@/utils/useTable";

const props = defineProps({
  // 错误信息列表数据
  errorDataList: {
    type: Array,
    default: () => [],
  },
});

const { errorDataList } = toRefs(props);

const errorBox = ref(false);

defineExpose({
  errorBox,
});
</script>

<style lang="scss" scoped>
:deep(.uploadErrorTable) {
  .el-dialog__body {
    padding: 20px;
    .el-scrollbar__wrap {
      max-height: 400px;
      overflow-y: scroll;
    }
  }
}
</style>
